<template>
    <div>
      <zh-header-toolbar>
        <zh-button style="margin-left: 8px" button-type="add" @click="addConvert">新增
        </zh-button>
        <zh-button style="margin-left: 8px" button-type="del" @click="deleteConvert">删除
        </zh-button>
        <zh-button style="margin-left: 8px"  @click="editConvert">编辑</zh-button>
      </zh-header-toolbar>
      <zh-space style="padding-top: 10px">
        <zh-card title="">
          <zh-form ref="queryForm" :model="state.queryParam" >
            <zh-form-item prop="liteflowConvertSourcecode" label="源接口编码">
              <zh-select v-model="state.queryParam.liteflowConvertSourcecode"
                         label="源接口编码" placeholder="源接口编码" :dropdownMatchSelectWidth="false"
                         :options="state.apiDict"
              >
              </zh-select>
            </zh-form-item>
            <zh-form-item prop="liteflowConvertTargetcode" label="目标接口编码"
                          v-model="state.queryParam.liteflowConvertTargetcode">
              <zh-select v-model="state.queryParam.liteflowConvertTargetcode"
                         label="目标接口编码" placeholder="目标接口编码" :dropdownMatchSelectWidth="false"
                         :options="state.apiDict"
              >
              </zh-select>
            </zh-form-item>

            <zh-form-input prop="liteflowConvertSourcefield" label="源参数字段"
                           v-model="state.queryParam.liteflowConvertSourcefield"></zh-form-input>
            <zh-form-input prop="liteflowConvertTargetfield" label="目标参数字段"
                           v-model="state.queryParam.liteflowConvertTargetfield"></zh-form-input>
            <zh-form-query :span="24" :showAdvanced="false" :form-ref="queryForm" @queryClick="clearData"
                           :table-ref="convertTable"></zh-form-query>
          </zh-form>
        </zh-card>
        <zh-table
            ref="convertTable"
            title="参数转化列表"
            :height="600"
            funcCode="liteflowConvert0001"
            :columns="state.tableColumn"
            @radio-change="radioChangeEvent"
            :radio-config="{ trigger: 'row' }"
            :disabled="false"
            highlight-current-row
            @current-change="handleCurrentChange"
        >
        </zh-table>
      </zh-space>
      <zh-dialog
        ref="dialog"
        v-model="state.dialogVisible"
        title="参数转化信息"
        width="40%"
        @confirm="saveConvert"
      >

          <convert-form ref="convertInfoPage" scroll-height="60vh"/>
      </zh-dialog>
    </div>
</template>

<script lang="ts" setup name="liteFlowConvert">
import {FormInstance,ElMessageBox} from "element-plus";
import ConvertForm from '@/views/apiCenter/ApiLiteFlow/component/ConvertForm.vue';


const props = defineProps({
  targetCode: String,
})

//-----------定义子组件---------------
const formRef = ref<FormInstance>();
const queryForm = ref<any>({});
const convertTable = ref<any>({});
const convertInfoPage = ref();
const saveType = ref('edit');



//-----------定义参数-----------------
const state = reactive({
  //允许范围内接口字典
  apiDict:[],
  //弹窗
  dialogVisible:false,

  //查询参数
  queryParam:{
    liteflowConvertSourcecode:'',//源接口编码
    liteflowConvertTargetcode:props.targetCode,//目标接口编码
    liteflowConvertSourcefield:'',//源接口参数字段
    liteflowConvertTargetfield:'',//目标接口参数字段
    liteflowChainId:'',
  },
  liteflowConvertId:'',
  selectRow: {},
  selectNode: {} as any,
  convertInfo:{} as any,
  //参数转化列表
  tableColumn:[
    {
      type: 'radio',
      width: 50,
      fixed: 'left',
      align: 'center',
    },
    {field: 'liteflowConvertId', title: '参数转化Id', fixed: 'left', visible: false, align: 'center', width: 150},
    {field: 'liteflowChainId', title: '编排规则表主键', fixed: 'left', visible: false, align: 'center', width: 150},
    {field: 'liteflowConvertSourcecode', title: '源功能编号', visible: true, align: 'center', width: 150},
    {field: 'liteflowConvertSourcetitle', title: '源功能名称',  visible: true, align: 'center', width: 200},
    {field: 'liteflowConvertSourceid', title: '源参数主键',  visible: false, align: 'center', width: 150},
    {field: 'liteflowConvertSourcetype', title: '源参数类型',  visible: true, align: 'center', width: 100},
    {field: 'liteflowConvertSourcefrom', title: '源参数所属',  visible: true, align: 'center', width: 100},
    {field: 'liteflowConvertSourcename', title: '源参数名称', visible: true, align: 'center', width: 200},
    {field: 'liteflowConvertSourcefield', title: '源参数字段',  visible: true, align: 'center', width: 200},
    {field: 'liteflowConvertTargetcode', title: '目标功能编号',  visible: true, align: 'center', width: 150},
    {field: 'liteflowConvertTargettitle', title: '目标功能名称', visible: true, align: 'center', width: 200},
    {field: 'liteflowConvertTargetid', title: '目标参数主键',  visible: false, align: 'center', width: 150},
    {field: 'liteflowConvertTargettype', title: '目标参数类型',  visible: true, align: 'center', width: 100},
    {field: 'liteflowConvertTargetfrom', title: '目标参数所属',  visible: true, align: 'center', width: 100},
    {field: 'liteflowConvertTargetname', title: '目标参数名称', visible: true, align: 'center', width: 200},
    {field: 'liteflowConvertTargetfield', title: '目标参数字段',  visible: true, align: 'center', width: 200},
  ],
  chainId:''
});

//----------初始化加载---------------convertTable
onMounted(() => {
  state.apiDict=$store.serviceFlow.funcCodeMap;
  state.chainId=$store.serviceFlow.chainId;
  state.queryParam.liteflowChainId=$store.serviceFlow.chainId;
})

watch(
    () => props.targetCode,
    () => {
      state.queryParam.liteflowConvertTargetcode=props.targetCode;
    }
);

//----------自定义方法----------------

function radioChangeEvent({row}) {
  state.liteflowConvertId = row.liteflowConvertId;
  state.selectRow = row;
}

function handleCurrentChange(row) {
  state.selectRow = row;
  state.liteflowConvertId = row.liteflowConvertId;
}


function clearData(){
  state.liteflowConvertId = '';
  state.selectRow = {};
  state.convertInfo = {}
}

function addConvert(){
  clearData();
  state.dialogVisible = true;
  saveType.value = 'add';
}

function deleteConvert(){
  if (!state.liteflowConvertId) {
    $messageBox.warning('请先选择需要删除的数据', '提示');
    return;
  }
  ElMessageBox({
    title: '删除确认',
    message: h('p', null, [
      h('span', null, '是否确定删除转化参数'),
      h('i', { style: 'color: teal' }, state.selectRow.liteflowConvertId),
    ]),
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = '正在删除...'
        deleteConvertSave(instance,done);
      } else {
        done()
      }
    },
  })
}

function deleteConvertSave(instance,done){
  if (state.liteflowConvertId) {
    const params = {
      liteflowConvertId: state.liteflowConvertId,
    };
    setTimeout(() => {
      $api.common.send.post('liteflowConvert0006',params)
          .then(() => {
            done();
            instance.confirmButtonLoading = false
            $messageBox.success('删除成功', '提示');
            state.liteflowConvertId = '';
            state.selectRow = {};
            convertTable.value.refresh();
            state.selectNode = [];
            state.convertInfo = null;
            convertInfoPage.value.setInitDate(null);
          })
          .catch(() => {
            done();
            instance.confirmButtonLoading = false
          });
    }, 100);
  } else {
    $messageBox.warning('请先选择需要删除的数据', '提示');
  }

}
function editConvert(){
  if (state.liteflowConvertId) {
    nextTick(()=>{
      state.selectNode = {
        key:state.liteflowConvertId
      }
      findConvertInfo();
    });
  } else {
    ElMessageBox.confirm(
        '请先选择需要操作的参数转化',
        '提示',
        {
          confirmButtonText: '确定',
          type: 'warning',
          showCancelButton: false
        }
    ).then(() => {

    }).catch(() => {

    })
    return;
  }
  state.dialogVisible = true;
}

function findConvertInfo() {
  if (state.selectNode && state.selectNode.key) {
    const params = {
      liteflowConvertId: state.selectNode.key,
    };
    $api.common.send.post('liteflowConvert0002',params).then((res) => {
      state.convertInfo = res.result;
      // 赋值子组件信息
      convertInfoPage.value.setInitDate(res.result);
    }).catch(() => {});
  }
}

function saveConvert(){
  //表单验证
  convertInfoPage.value.form.validate((valid) => {
    if (valid) {
     const convertData: any = convertInfoPage.value.convertInfo;
     if(convertData.liteflowConvertSourceid==convertData.liteflowConvertTargetid){
       $messageBox.warning('源接口参数和目标接口参数不能是同一个', '提示');
       return
     }
     if(convertData.liteflowConvertSourcecode==convertData.liteflowConvertTargetcode){
       $messageBox.warning('源接口和目标接口不能是同一个', '提示');
       return
     }
      if(convertData.liteflowConvertId){
        convertData.liteflowChainId=state.chainId;
        setTimeout(() => {
          $api.common.send.post('liteflowConvert0005',convertData)
              .then((res) => {
                $messageBox.success('修改成功', '提示');
                convertInfoPage.value.setInitDate(res.result);
                state.convertInfo = convertInfoPage.value.convertInfo;
                state.dialogVisible=false;
              })
              .catch(() => {
              });
        }, 10);
      }else{
        convertData.liteflowChainId=state.chainId;
        setTimeout(() => {
          $api.common.send.post('liteflowConvert0004',convertData)
              .then((res) => {
                $messageBox.success('新增成功', '提示');
                convertInfoPage.value.setInitDate(res.result);
                state.convertInfo = convertInfoPage.value.convertInfo;
                state.dialogVisible=false;
              })
              .catch(() => {
              });
        }, 10);
      }
    }
  });
}

</script>
